<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-refresh"
        @click="refresh"
      >
        刷新
      </el-button>
    </div>
    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created"
        label="创建时间"
        align="center"
        width=""
      />
      <el
        <el-table-column
        prop="state"
        label="文件名"
        align="center"
        width=""
      />
      <el-table-column
        label="状态"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.state | stateFilter }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="400px"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state==2"
            type="success"
            size="mini"
            style="70px"
            @click="downloadFile(scope.row)"
          >下载</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>
<script>
const defaultFormThead = ['apple', 'banana']
import { downList, cooperationList } from '@/api/v1'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { parseTime } from '@/utils'
import { Loading } from 'element-ui'

export default {
  directives: { waves },
  components: { Pagination },
  filters: {
    stateFilter(state) {
      if (state == 1) {
        return '下载中'
      } else if (state == 2) {
        return '已完成'
      } else if (state == 3) {
        return '失败'
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id',
        phone: '',
        id: '',
        vehicle: '',
        uuid: '',
        cooperation: '',
        create: '',
        createEnd: ''
      },
      key: 1, // table key
      formTheadOptions: ['apple', 'banana', 'orange'],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead, // 默认表头 Default header
      options: {
        fullscreen: true,
        // spinner: 'el-icon-loading',
        // background: 'rgba(0, 0, 0, 0.7)',
        text: '加载中...'
      }
    }
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      )
      this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  created() {
    const id = this.$route.query.id
    this.listQuery.cooperation = id
    console.log(id)
    this.getList()
  },
  methods: {
    downloadFile(row) {
      window.open(row.downloadUrl)
    },
    refresh() {
      this.getList()
    //  window.location.reload()
    },
    getList() {
      // let loadingInstance = Loading.service(this.options);
      downList(this.listQuery).then(res => {
        // loadingInstance.close();
        res.data.list = new Array()
        res.data.list[0] = res.data
        this.tableData = res.data.list
        console.log(this.tableData)
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getCooperationAll() {},
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

